<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RK3588硬件编码视频流测试</title>
    <style>
        /* 重置与基础样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            /* 间距变量 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-6: 24px;
            --space-8: 32px;
            
            /* 颜色变量 */
            --text-primary: #111827;
            --text-secondary: #6B7280;
            --border-color: #E5E7EB;
            --bg-card: #ffffff;
            --bg-subtle: #F9FAFB;
            
            /* 设计变量 */
            --radius: 12px;
            --shadow: 0 2px 12px rgba(17,24,39,.06);
            --font-size: 14px;
            --line-height: 1.6;
        }
        
        body { 
            font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; 
            background: #ffffff;
            min-height: 100vh;
            color: var(--text-primary);
            font-size: var(--font-size);
            line-height: var(--line-height);
        }
        
        /* 12栅格容器系统 */
        .container { 
            max-width: 1280px; 
            margin: 0 auto; 
            padding: 0 var(--space-6);
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: var(--space-6);
            margin-bottom: var(--space-6);
        }
        
        .col-12 { grid-column: span 12; }
        .col-8 { grid-column: span 8; }
        .col-4 { grid-column: span 4; }
        .col-6 { grid-column: span 6; }
        
        /* 统一卡片样式 */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card-header {
            padding: var(--space-4) var(--space-6);
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-subtle);
            flex-shrink: 0;
        }
        
        .card-body {
            padding: var(--space-6);
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }
        
        /* 顶部Header */
        .header {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            color: var(--text-primary);
            font-size: 20px;
            font-weight: 600;
        }
        
        .status-info {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--space-2);
        }
        
        .status { 
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            border-radius: 20px;
            font-weight: 600;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        .status.online { 
            background: rgba(46, 204, 113, 0.1);
            color: #27ae60;
            border: 1px solid rgba(46, 204, 113, 0.3);
        }
        .status.offline { 
            background: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
            border: 1px solid rgba(231, 76, 60, 0.3);
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
        }
        .status.online .status-dot { 
            animation: pulse 2s infinite;
            box-shadow: 0 0 8px currentColor;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }
        
        .current-time {
            font-size: 12px;
            color: var(--text-secondary);
            font-family: monospace;
        }
        
        /* 视频卡片 */
        .video-card {
            height: 480px;
        }
        
        .video-card .card-body {
            padding: 0;
        }
        
        .video-container {
            flex: 1;
            position: relative;
            background: #000;
            margin: var(--space-6);
            margin-bottom: 0;
            border-radius: var(--space-2);
            overflow: hidden;
        }
        
        .video { 
            width: 100%; 
            height: 100%; 
            object-fit: cover;
            display: block;
        }
        
        .video-placeholder {
            width: 100%;
            height: 100%;
            background: var(--bg-subtle);
            border: 2px dashed var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
        }
        
        .placeholder-content {
            text-align: center;
        }
        
        .placeholder-content h3 {
            font-size: 18px;
            margin-bottom: var(--space-3);
            color: var(--text-secondary);
        }
        
        /* 工具栏 */
        .toolbar {
            padding: var(--space-4) var(--space-6);
            border-top: 1px solid var(--border-color);
            background: var(--bg-subtle);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        
        .format-selector {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--space-2);
            background: var(--bg-card);
            font-size: 12px;
            color: var(--text-primary);
        }
        
        .controls {
            display: flex;
            gap: var(--space-2);
        }
        
        .btn { 
            background: #667eea;
            color: white; 
            border: none; 
            padding: var(--space-2) var(--space-4);
            border-radius: var(--space-2);
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .btn:hover {
            background: #5a67d8;
            transform: translateY(-1px);
        }
        
        .btn.success {
            background: #48bb78;
        }
        
        .btn.success:hover {
            background: #38a169;
        }
        
        .btn.warning {
            background: #ed8936;
        }
        
        .btn.warning:hover {
            background: #dd6b20;
        }
        
        /* 状态面板 - 描述列表 */
        .status-panel .card-body {
            padding: var(--space-4);
        }
        
        .status-dl {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-3);
            margin: 0;
        }
        
        .status-item {
            display: flex;
            flex-direction: column;
            padding: var(--space-3);
            background: var(--bg-subtle);
            border-radius: var(--space-2);
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        
        .status-item:hover {
            background: var(--bg-card);
            border-color: #667eea;
        }
        
        .status-item dt {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
            margin-bottom: var(--space-1);
        }
        
        .status-item dd {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* 激光雷达区域 */
        .radar-card {
            height: 500px;
        }
        
        .radar-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: var(--space-2);
            overflow: hidden;
        }
        
        .radar-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .radar-info {
            position: absolute;
            top: var(--space-4);
            right: var(--space-4);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: var(--space-3);
            border-radius: var(--space-2);
            font-size: 12px;
        }
        
        .radar-status {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        
        .radar-status .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f56565;
        }
        
        .radar-status.online .status-dot {
            background: #48bb78;
            animation: pulse 2s infinite;
        }
        
        .radar-stats {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .stat-label {
            color: #a0aec0;
        }
        
        .stat-value {
            color: white;
            font-weight: 600;
        }
        
        /* 迷你图表区域 */
        .mini-charts {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }
        
        .mini-chart-item h4 {
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        
        .mini-chart {
            width: 100%;
            height: 120px;
        }
        
        /* 响应式设计 */
        @media (max-width: 1279px) {
            .col-8 { grid-column: span 6; }
            .col-4 { grid-column: span 6; }
            .charts-grid { grid-template-columns: repeat(2, 1fr); }
        }
        
        @media (max-width: 767px) {
            .container { padding: 0 var(--space-4); }
            .grid { gap: var(--space-4); margin-bottom: var(--space-4); }
            .col-8, .col-4, .col-6 { grid-column: span 12; }
            .status-dl { grid-template-columns: 1fr; }
            .charts-grid { grid-template-columns: 1fr; }
            .video-card { height: 300px; }
            .header { flex-direction: column; gap: var(--space-4); text-align: center; }
            .controls { flex-wrap: wrap; }
            .toolbar { flex-direction: column; gap: var(--space-3); }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部Header (12/12) -->
        <div class="header">
            <h1>RK3588硬件编码视频流测试系统</h1>
            <div class="status-info">
                <div class="status offline" id="connection-status">
                    <div class="status-dot"></div>
                    <span>离线</span>
                </div>
                <div class="current-time" id="current-time">2025/10/11 14:07:24</div>
            </div>
        </div>

        <!-- 第一行：视频区域 (8/12) + 状态区域 (4/12) -->
        <div class="grid">
            <div class="col-8">
                <div class="card video-card">
                    <div class="card-header">
                        <h2 class="card-title">实时视频流</h2>
                    </div>
                    <div class="card-body">
                        <div class="video-container">
                            <div class="video-placeholder" id="video-placeholder">
                                <div class="placeholder-content">
                                    <h3>等待视频流连接...</h3>
                                    <p>请确保RK3588设备已启动并连接</p>
                                </div>
                            </div>
                            <img id="video-stream" class="video" style="display: none;" alt="视频流">
                        </div>
                    </div>
                    <div class="toolbar">
                        <select class="format-selector" id="stream-format">
                            <option value="MJPEG">MJPEG 格式</option>
                        </select>
                        <div class="controls">
                            <button class="btn" onclick="refreshStream()">刷新流</button>
                            <button class="btn success" onclick="startStream()">开始传输</button>
                            <button class="btn warning" onclick="stopStream()">停止传输</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-4">
                <div class="card status-panel">
                    <div class="card-header">
                        <h3 class="card-title">实时状态监控</h3>
                    </div>
                    <div class="card-body">
                        <dl class="status-dl">
                            <div class="status-item">
                                <dt>连接状态</dt>
                                <dd id="status-connection">离线</dd>
                            </div>
                            <div class="status-item">
                                <dt>视频格式</dt>
                                <dd id="status-format">MJPEG</dd>
                            </div>
                            <div class="status-item">
                                <dt>设备来源</dt>
                                <dd id="status-source">MJPEG (USB Camera)</dd>
                            </div>
                            <div class="status-item">
                                <dt>视频分辨率</dt>
                                <dd id="status-resolution">640x480</dd>
                            </div>
                            <div class="status-item">
                                <dt>帧率</dt>
                                <dd id="status-fps">15 fps</dd>
                            </div>
                            <div class="status-item">
                                <dt>码率估算</dt>
                                <dd id="status-bitrate">1.2 Mbps</dd>
                            </div>
                            <div class="status-item">
                                <dt>传输延迟</dt>
                                <dd id="status-latency">80-160ms</dd>
                            </div>
                            <div class="status-item">
                                <dt>最后更新</dt>
                                <dd id="status-timestamp">14:07:24</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二行：激光雷达地图 (8/12) + 性能监控 (4/12) -->
        <div class="grid">
            <div class="col-8">
                <div class="card radar-card">
                    <div class="card-header">
                        <h3 class="card-title">LD14P激光雷达环境地图</h3>
                    </div>
                    <div class="card-body">
                        <div class="radar-container">
                            <canvas id="radar-canvas" class="radar-canvas"></canvas>
                            <div class="radar-info">
                                <div class="radar-status" id="radar-status">
                                    <span class="status-dot"></span>
                                    <span>雷达离线</span>
                                </div>
                                <div class="radar-stats">
                                    <div class="stat-item">
                                        <span class="stat-label">点数:</span>
                                        <span class="stat-value" id="radar-points">0</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-label">范围:</span>
                                        <span class="stat-value">8m</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-label">频率:</span>
                                        <span class="stat-value">6Hz</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">系统性能监控</h3>
                    </div>
                    <div class="card-body">
                        <div class="mini-charts">
                            <div class="mini-chart-item">
                                <h4>帧率趋势</h4>
                                <div id="fps-mini-chart" class="mini-chart"></div>
                            </div>
                            
                            <div class="mini-chart-item">
                                <h4>网络延迟</h4>
                                <div id="latency-mini-chart" class="mini-chart"></div>
                            </div>
                            
                            <div class="mini-chart-item">
                                <h4>连接状态</h4>
                                <div id="connection-mini-chart" class="mini-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        // Socket.IO连接
        const socket = io();
        
        // 全局变量
        let fpsChart, latencyChart, connectionChart;
        let fpsData = [];
        let latencyData = [];
        let connectionData = { online: 0, offline: 0 };
        
        // 激光雷达相关
        let radarCanvas, radarCtx;
        let radarData = [];
        let radarConnected = false;
        
        // 初始化激光雷达画布
        function initRadarCanvas() {
            radarCanvas = document.getElementById('radar-canvas');
            radarCtx = radarCanvas.getContext('2d');
            
            // 设置画布大小
            function resizeCanvas() {
                const rect = radarCanvas.getBoundingClientRect();
                radarCanvas.width = rect.width;
                radarCanvas.height = rect.height;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 开始绘制循环
            drawRadar();
        }
        
        // 绘制激光雷达地图
        function drawRadar() {
            if (!radarCtx) return;
            
            const width = radarCanvas.width;
            const height = radarCanvas.height;
            const centerX = width / 2;
            const centerY = height / 2;
            const maxRadius = Math.min(width, height) / 2 - 20;
            
            // 清空画布
            radarCtx.fillStyle = '#000';
            radarCtx.fillRect(0, 0, width, height);
            
            // 绘制网格圆圈 (1m, 2m, 4m, 8m)
            radarCtx.strokeStyle = '#333';
            radarCtx.lineWidth = 1;
            for (let i = 1; i <= 4; i++) {
                const radius = (maxRadius / 4) * i;
                radarCtx.beginPath();
                radarCtx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
                radarCtx.stroke();
                
                // 距离标签
                radarCtx.fillStyle = '#666';
                radarCtx.font = '10px Arial';
                radarCtx.fillText(`${i * 2}m`, centerX + radius - 15, centerY - 5);
            }
            
            // 绘制十字线
            radarCtx.strokeStyle = '#333';
            radarCtx.beginPath();
            radarCtx.moveTo(centerX, centerY - maxRadius);
            radarCtx.lineTo(centerX, centerY + maxRadius);
            radarCtx.moveTo(centerX - maxRadius, centerY);
            radarCtx.lineTo(centerX + maxRadius, centerY);
            radarCtx.stroke();
            
            // 绘制雷达中心点
            radarCtx.fillStyle = '#48bb78';
            radarCtx.beginPath();
            radarCtx.arc(centerX, centerY, 4, 0, 2 * Math.PI);
            radarCtx.fill();
            
            // 绘制激光雷达点云数据
            if (radarData && radarData.length > 0) {
                radarCtx.fillStyle = '#00ff00';
                radarData.forEach(point => {
                    if (point.distance > 0 && point.distance <= 8) {
                        // 将极坐标转换为画布坐标
                        const angle = (point.angle - 90) * Math.PI / 180; // 调整角度，使0度朝上
                        const radius = (point.distance / 8) * maxRadius;
                        const x = centerX + radius * Math.cos(angle);
                        const y = centerY + radius * Math.sin(angle);
                        
                        // 根据距离调整点的大小和颜色
                        const pointSize = Math.max(1, 3 - point.distance / 4);
                        const intensity = Math.max(0.3, 1 - point.distance / 8);
                        
                        radarCtx.globalAlpha = intensity;
                        radarCtx.beginPath();
                        radarCtx.arc(x, y, pointSize, 0, 2 * Math.PI);
                        radarCtx.fill();
                    }
                });
                radarCtx.globalAlpha = 1;
            }
            
            // 绘制扫描线 (可选的动画效果)
            if (radarConnected) {
                const scanAngle = (Date.now() / 50) % 360; // 旋转扫描线
                const scanRad = (scanAngle - 90) * Math.PI / 180;
                
                radarCtx.strokeStyle = 'rgba(0, 255, 0, 0.3)';
                radarCtx.lineWidth = 2;
                radarCtx.beginPath();
                radarCtx.moveTo(centerX, centerY);
                radarCtx.lineTo(
                    centerX + maxRadius * Math.cos(scanRad),
                    centerY + maxRadius * Math.sin(scanRad)
                );
                radarCtx.stroke();
            }
            
            requestAnimationFrame(drawRadar);
        }
        
        // 初始化迷你图表
        function initMiniCharts() {
            // 帧率迷你图表
            fpsChart = echarts.init(document.getElementById('fps-mini-chart'));
            const fpsOption = {
                grid: { top: 10, right: 10, bottom: 20, left: 30 },
                xAxis: { type: 'category', data: [], show: false },
                yAxis: { type: 'value', min: 0, max: 30, show: false },
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    lineStyle: { color: '#667eea', width: 2 },
                    areaStyle: { color: 'rgba(102, 126, 234, 0.2)' }
                }]
            };
            fpsChart.setOption(fpsOption);
            
            // 延迟迷你图表
            latencyChart = echarts.init(document.getElementById('latency-mini-chart'));
            const latencyOption = {
                grid: { top: 10, right: 10, bottom: 20, left: 30 },
                xAxis: { type: 'category', data: [], show: false },
                yAxis: { type: 'value', min: 0, show: false },
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    lineStyle: { color: '#ed8936', width: 2 },
                    areaStyle: { color: 'rgba(237, 137, 54, 0.2)' }
                }]
            };
            latencyChart.setOption(latencyOption);
            
            // 连接状态迷你饼图
            connectionChart = echarts.init(document.getElementById('connection-mini-chart'));
            const connectionOption = {
                grid: { top: 0, right: 0, bottom: 0, left: 0 },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    data: [
                        { value: 1, name: '在线', itemStyle: { color: '#48bb78' } },
                        { value: 0, name: '离线', itemStyle: { color: '#f56565' } }
                    ],
                    label: { show: false },
                    emphasis: { disabled: true }
                }]
            };
            connectionChart.setOption(connectionOption);
        }
        
        // 更新时间显示
        function updateTime() {
            const now = new Date();
            const timeStr = now.getFullYear() + '/' + 
                          String(now.getMonth() + 1).padStart(2, '0') + '/' + 
                          String(now.getDate()).padStart(2, '0') + ' ' +
                          String(now.getHours()).padStart(2, '0') + ':' + 
                          String(now.getMinutes()).padStart(2, '0') + ':' + 
                          String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = timeStr;
            document.getElementById('status-timestamp').textContent = 
                String(now.getHours()).padStart(2, '0') + ':' + 
                String(now.getMinutes()).padStart(2, '0') + ':' + 
                String(now.getSeconds()).padStart(2, '0');
        }
        
        // Socket事件处理
        socket.on('connect', function() {
            console.log('WebSocket连接成功');
        });
        
        socket.on('video_update', function(data) {
            console.log('收到视频更新:', data);
            
            // 更新状态显示 - 映射后端字段到前端显示
            document.getElementById('status-connection').textContent = data.connected ? '在线' : '离线';
            document.getElementById('status-format').textContent = data.codec || 'MJPEG';
            document.getElementById('status-source').textContent = data.protocol || 'MJPEG (USB Camera)';
            document.getElementById('status-resolution').textContent = data.resolution || '640x480';
            document.getElementById('status-fps').textContent = (data.fps || 15) + ' fps';
            document.getElementById('status-bitrate').textContent = data.bitrate || '1.2 Mbps';
            document.getElementById('status-latency').textContent = data.latency || '80-160ms';
            
            // 更新图表数据
            const now = new Date();
            const timeLabel = now.getHours().toString().padStart(2, '0') + ':' + 
                            now.getMinutes().toString().padStart(2, '0') + ':' + 
                            now.getSeconds().toString().padStart(2, '0');
            
            // 帧率数据
            fpsData.push({ time: timeLabel, value: data.fps || 15 });
            if (fpsData.length > 20) fpsData.shift();
            
            fpsChart.setOption({
                xAxis: { data: fpsData.map(d => d.time) },
                series: [{ data: fpsData.map(d => d.value) }]
            });
            
            // 延迟数据
            const latencyValue = parseInt((data.latency || '120ms').replace('ms', '').split('-')[0]);
            latencyData.push({ time: timeLabel, value: latencyValue });
            if (latencyData.length > 20) latencyData.shift();
            
            latencyChart.setOption({
                xAxis: { data: latencyData.map(d => d.time) },
                series: [{ data: latencyData.map(d => d.value) }]
            });
        });
        
        socket.on('connection_update', function(data) {
            console.log('收到连接更新:', data);
            
            const statusElement = document.getElementById('connection-status');
            const statusText = document.getElementById('status-connection');
            
            // 后端发送的是 {connected: true/false}
            if (data.connected === true) {
                statusElement.className = 'status online';
                statusElement.querySelector('span').textContent = '在线';
                statusText.textContent = '在线';
                
                // 显示视频流
                document.getElementById('video-placeholder').style.display = 'none';
                const videoStream = document.getElementById('video-stream');
                videoStream.style.display = 'block';
                videoStream.src = '/video_proxy?' + new Date().getTime();
                
                connectionData.online++;
            } else {
                statusElement.className = 'status offline';
                statusElement.querySelector('span').textContent = '离线';
                statusText.textContent = '离线';
                
                // 隐藏视频流
                document.getElementById('video-placeholder').style.display = 'flex';
                document.getElementById('video-stream').style.display = 'none';
                
                connectionData.offline++;
            }
            
            // 更新连接状态图表
            connectionChart.setOption({
                series: [{
                    data: [
                        { value: connectionData.online, name: '在线' },
                        { value: connectionData.offline, name: '离线' }
                    ]
                }]
            });
        });
        
        // 激光雷达数据更新
        socket.on('lidar_update', function(data) {
            console.log('收到激光雷达数据:', data);
            
            // 更新雷达状态
            const radarStatus = document.getElementById('radar-status');
            const radarPoints = document.getElementById('radar-points');
            
            if (data.connected && data.points && data.points.length > 0) {
                radarConnected = true;
                radarData = data.points;
                
                radarStatus.className = 'radar-status online';
                radarStatus.querySelector('span:last-child').textContent = '雷达在线';
                radarPoints.textContent = data.point_count || data.points.length;
            } else {
                radarConnected = false;
                radarData = [];
                
                radarStatus.className = 'radar-status';
                radarStatus.querySelector('span:last-child').textContent = '雷达离线';
                radarPoints.textContent = '0';
            }
        });
        
        // 控制函数
        function refreshStream() {
            const videoStream = document.getElementById('video-stream');
            if (videoStream.style.display !== 'none') {
                videoStream.src = '/video_proxy?' + new Date().getTime();
            }
        }
        
        function startStream() {
            socket.emit('start_stream');
        }
        
        function stopStream() {
            socket.emit('stop_stream');
        }
        
        // 检查设备状态
        function checkDeviceStatus() {
            fetch('/api/status')
                .then(response => response.json())
                .then(data => {
                    console.log('设备状态:', data);
                    
                    // 更新连接状态
                    const statusElement = document.getElementById('connection-status');
                    const statusText = document.getElementById('status-connection');
                    
                    if (data.connected) {
                        statusElement.className = 'status online';
                        statusElement.querySelector('span').textContent = '在线';
                        statusText.textContent = '在线';
                        
                        // 显示视频流
                        document.getElementById('video-placeholder').style.display = 'none';
                        const videoStream = document.getElementById('video-stream');
                        videoStream.style.display = 'block';
                        videoStream.src = '/video_proxy?' + new Date().getTime();
                    } else {
                        statusElement.className = 'status offline';
                        statusElement.querySelector('span').textContent = '离线';
                        statusText.textContent = '离线';
                        
                        // 显示占位符
                        document.getElementById('video-placeholder').style.display = 'flex';
                        document.getElementById('video-stream').style.display = 'none';
                    }
                    
                    // 更新其他状态信息
                    document.getElementById('status-format').textContent = data.codec || 'MJPEG';
                    document.getElementById('status-source').textContent = data.protocol || 'MJPEG (USB Camera)';
                    document.getElementById('status-resolution').textContent = data.resolution || '640x480';
                    document.getElementById('status-fps').textContent = (data.fps || 15) + ' fps';
                    document.getElementById('status-bitrate').textContent = data.bitrate || '1.2 Mbps';
                    document.getElementById('status-latency').textContent = data.latency || '80-160ms';
                })
                .catch(error => {
                    console.log('获取状态失败:', error);
                });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initMiniCharts();
            initRadarCanvas();
            updateTime();
            setInterval(updateTime, 1000);
            
            // 检查初始状态
            checkDeviceStatus();
            
            // 窗口大小改变时重新调整图表
            window.addEventListener('resize', function() {
                if (fpsChart) fpsChart.resize();
                if (latencyChart) latencyChart.resize();
                if (connectionChart) connectionChart.resize();
            });
        });
    </script>
</body>
</html>